<template>
  <!-- 移动客户 -->
  <div>
    <el-dialog
      v-el-drag-dialog
      title="移动客户"
      :visible.sync="visible"
      width="500px"
    >
      <el-form ref="form" class="form" :model="query" label-position="right" label-width="80px">
        <el-form-item label="所属机构">
          <el-tree-select
            v-model="query.orgId"
            :clearable="false"
            class="tree-select"
            :popover-width="360"
            :select-params="{
              clearable: true,
              placeholder: '请选择组织机构',
              loading: $loadingPlugin.getTreeData
            }"
            :tree-params=" {
              'default-expand-all': true,
              'expand-on-click-node': false,
              'highlight-current': true,
              props:{
                value:'orgSNNo',
                label: 'orgName',
                disabled: 'disabled',
              },
              data: treeData
            }"
            @node-click="selectTreeChange"
          />
        </el-form-item>
        <el-form-item label="价格分类">
          <el-select v-model="query.priceCgId" placeholder="请选择">
            <el-option v-for="l in selectPriceList" :key="l.priceCgId" :value="l.priceCgId" :label="l.priceCgName" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" @click="save">保 存</el-button>
        <el-button @click="visible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'
  import { defaultPaymentMethodMap } from '@/utils/map'
  import { queryPriceType, queryPriceTypeMove } from '@/api'

  export default {
    name: 'moveClient',
    data() {
      return {
        visible: false,
        selectPriceList: [],
        defaultPaymentMethodMap,
        selectTableList: [],
        treeData: [],
        temp: {},
        query: { priceCgId: null }
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await this.getTreeData()
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        // const res = await organizationQueryList({})
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      // 选择所属机构
      async selectTreeChange(value) {
        this.orgSNNo = value.orgSNNo
        this.query.priceCgId = null
        const params = {
          orgSNNo: value.orgSNNo,
          currentPage: 1,
          pageSize: 999
        }
        const res = await queryPriceType(params)
        this.selectPriceList = res.data.rows
      },
      async save() {
        var priceObj = this.selectPriceList.find(l => this.query.priceCgId === l.priceCgId)
        var list = this.selectTableList.map(l => {
          return {
            'priceCgId': priceObj.priceCgId,
            'priceCgName': priceObj.priceCgName,
            'csmId': l.csmId,
            'priceCgIdFrom': l.priceCgIdFrom
          }
        })
        const res = await queryPriceTypeMove(list)
        if (res.success) {
          this.$message.success('变更成功')
          this.visible = false
        }
      },
      // 打开
      open(query) {
        return new Promise((resolve) => {
          this.resolve = resolve
          this.visible = true
          this.selectTableList = query
          // if (query) {
          //   this.query = Object.assign(this.query, query)
          // }
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
.form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  & /deep/ .el-form-item {
    width: 100%;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
</style>
